<template>
  <div>
    <HelloDog
      v-for="(item, index) in list"
      :key="index"
      :dogImgUrl="item.dogImgUrl"
      :dogName="item.dogName"
      @loveDog="DogStr"
    />
    <div class="box2">
      <p>显示喜欢的狗：</p>
      <ul>
        <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import HelloDog from './components/HelloDog3.vue'
export default {
  components: {
    HelloDog,
  },
  data() {
    return {
      arr: [],
      list: [
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=3211846475,2299871361&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=513',
          dogName: '博美',
        },
        {
          dogImgUrl:
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.bizhitupian.com%2F22%2F6f%2Fd0%2Fcb%2Fb43462c303be0dc1e167ff5dc0ca98ad.jpg&refer=http%3A%2F%2Fup.bizhitupian.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669465134&t=bb9b249c56d6c7d2d5337b28bbd71234',
          dogName: '泰迪',
        },
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=1826987301,999600856&fm=253&fmt=auto&app=138&f=JPEG?w=802&h=500',
          dogName: '金毛',
        },
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=3180764092,961872304&fm=253&fmt=auto&app=120&f=JPEG?w=1195&h=800',
          dogName: '哈士奇',
        },
        {
          dogImgUrl:
            'https://img1.baidu.com/it/u=1966443928,3703870790&fm=253&fmt=auto&app=138&f=JPEG?w=350&h=350',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=695418473,11748117&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=500',
          dogName: '萨摩耶',
        },
      ],
    }
  },
  methods: {
    DogStr(dogName) {
      this.arr.push(dogName)
    },
  },
}
</script>

<style>
.box2 {
  float: right;
}
li {
  list-style: none;
}
</style>
